<template>
	<view class="search xpy">
		<tabsTop tabName="商品搜索"></tabsTop>
		<search></search>
		<view class="mx-2 mt-4" style="position:relative;">
			<view class="font-md font-weight-bold">搜索历史</view>
			<text @click="clear" class="font-sm text-muted" style="position: absolute; right: 0; top: 10rpx;">清空</text>
			<view class="flex flex-wrap py-2">
				<text @click="GoGood(index)" :class="index+1%4==0?'':'mr-2'"
					class="py-2 px-4 mb-2 rounded-circle font-sm text-center text-ellipsis"
					v-for="(item,index) in history" :key="index"
					style="display: inline-block; width: 70rpx; background-color: #F6F7F8;">{{item}}</text>
			</view>
		</view>
		<botSponsor class="sponsor w-100" bgHeight="300rpx"></botSponsor>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import tabsBottom from "@/components/tabs/tabs-bottom.vue";
	import search from "@/components/mysearch/search.vue";
	import botSponsor from "@/components/botsponsor/sponsor.vue";
	import {
		deepClone
	} from "../../static/js/GeneralUtil";
	export default {
		components: {
			tabsTop,
			tabsBottom,
			search,
			botSponsor,
		},
		data() {
			return {
				history: [],
			}
		},
		onShow(){
			var that = this;
			var value=uni.getStorageSync('searchValue');
			if(value){
				this.history=[];
				value.forEach(item=>{
					this.history.push(item)
				})
			}
		},
		onLoad() {

		},
		methods: {
			clear() {
				var that = this;
				uni.removeStorageSync('searchValue')
				this.history=[];
			},
			GoGood(index){
				uni.navigateTo({
					url: "/pages/index/manygoods?value=" + this.history[index]
				})
			}

		}
	}
</script>

<style lang="scss">
	.search {
		position: relative;
		width: 100vw;
		height: 100vh;

		.sponsor {
			position: absolute;
			bottom: 0;
			background-color: #cccccc10;
		}
	}
</style>